<!-- version $Id: test_page.html 22 2009-03-29 17:53:36Z phpbbxpert $ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="revisit-after" content=" 30 days " />
	<meta name="robots" content="index,follow" />
	<meta name="rating" content="General" />   
	<meta name="description" content="" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="copyright" content="" />
	<!-- Coded by topdown - Webmasters United.org -->
	<title>XHTML Table-less Layout Tutorial</title>
	<link rel="stylesheet" type="text/css" href="new.css" title="Default" />
</head> 
<body style="background-color: #333; margin: 0px; padding: 0px; min-width: 800px;">
<div id="page_control" style="background-color: #666; width: auto; margin: 10px; padding: 0px;">
	
	<div id="side_block_control" style=" float: left; background-color: #fff; width: 23%; min-height:400px; margin: 10px; padding: 0px;">
		<div id="side_block1" style="background-color: #bbb; width: auto; height:200px; margin: 10px; padding: 10px;">
			<div style="display: block; color: #fff; background-color: #333; width: auto; height: auto; margin: 0px; padding: 10px;">
				<p>How about another block inside.<br />
					Note: the gap around this block is controled by the containing blocks padding.
					<br /><a href="http://www.w3schools.com/jsref/jsref_onclick.asp" onclick="window.open(this.href);return false;" title="" style="color:#00ff00;">js_ref_onclick</a>
				</p>
			</div>
		</div>
		<div id="side_block2" style="background-color: #777; width: auto; height:200px; margin: 10px; padding: 0px;"></div>	
	</div>
	<div class="something"></div>
	<div id="main_block_control" style="float: right; background-color: #111; width: 72%; min-height:auto; margin: 10px 10px 0px 0px; padding: 0px;">
		<div id="main_block1" style="background-color: #fff; width: auto; height:100px; margin: 10px; padding: 0px;">
			<p style="padding:10px;">All of these blocks should be fully fluid in the browser window.</p>
		</div>		
		
		<div id="main_block2_is_controler" style="background-color: #555; width: auto; height:100px; margin: 10px; padding: 0px 0px 0px 0px;">
			<div id="block2_inner1" style="float: left; background-color: #ccc; width: 48%; height:80px; margin: 10px 0px 0px 10px; padding: 0px;"></div>
			<div id="block3_inner2" style="float: right; background-color: #cff; width: 48%; height:80px; margin: 10px 10px 0px 0px; padding: 0px;"></div>
		</div>
				
		<div id="main_block3" style="background-color: #999; width: auto; height:100px; margin: 10px; padding: 0px;">
			<p style="padding:10px;">Coded by topdown ~ <a href="http://www.webmastersunited.org" onclick="window.open(this.href);return false;" title="" style="color:#00ff00;">Webmasters United Web Development</a></p>
		</div>
	</div>
	<div id="sample_footer" style="clear: both; background-color: #999; width: auto; height:100px; margin: 10px; padding: 10px;">
		<p>Some random text, this containing block was set clear:both; to clear the floating blocks.<br />
			If this was not coded in, then the block would end up at the top of the page and broken!
		</p>
	</div>
</div>
</body>
</html>